<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select v-model="biProjectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目名称">
					<el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName" :value="item.biProjectCode" />
				</el-select>
				<el-date-picker class="zs-space-right-sm" v-model="searchDate" :type="pickerDate" placeholder="日期" :clearable="false" :value-format="valueFormat" />
				<el-button class="zs-btn-plain" @click="getData()"> 查询 </el-button>
			</span>
			<span class="zs-layout-flex-row">
				<el-button class="zs-btn-plain" @click="openDialog">
					<span>说明</span>
				</el-button>
				<el-button class="zs-btn-plain" @click="handleDownload" disabled>
					<el-icon class="el-icon--left"> <Upload /> </el-icon>
					<span>导出</span>
				</el-button>
			</span>
		</div>
		<div class="zs-card zs-table-page-content">
			<SubjectTable :biProjectCode="biProjectCode" :type="type" :yearmonth="searchDate" :isFresh="isFresh" @setDate="setDate"> </SubjectTable>
			<div class="zs-text-gray-dark zs-text-sm zs-space-top">*单位：万元（不含税）</div>
		</div>

		<!-- 说明dialog -->
		<BudgetcAhievementDesDialog v-if="isShowDrawer" :isShow="isShowDrawer" :projectCode="biProjectCode" :yearmonth="searchDate" @close="closeDrawer"> </BudgetcAhievementDesDialog>
	</div>
</template>
<script setup lang="jsx">
	import BudgetcAhievementDesDialog from '../../components/budgetcAhievementDesDialog.vue';
	import dbPublicApi from '@/api/dbPublic';
	import detailApi from '@/api/Manage/Business/detailPages';
	import SubjectTable from './subjectTable';
	import { ref } from 'vue';
	import { downloadNewFile } from '@/utils/publicUtils';
	import { useRoute } from 'vue-router';
	const route = useRoute().query;

	const tabPermi = route.tabPermi;
	const type = route.type; // 商办产1，酒寓2
	let biProjectCode = ref(route.biProjectCode);
	let searchDate = ref('');
	let valueFormat = ref('');
	let pickerDate = ref('month');
	let isFresh = ref('');

	// 项目下拉选
	let projectList = ref([]);
	const getPorjectList = async () => {
		await dbPublicApi.queryProjectListsApi(tabPermi).then(res => {
			if (res.data.code == 200) {
				projectList.value = res.data.data.projects;
			}
		});
	};

	const initDate = () => {
		valueFormat.value = 'YYYY-MM';
		pickerDate.value = 'month';
	};

	const init = async () => {
		await getPorjectList();
		initDate();
	};

	const getData = () => {
		isFresh.value = new Date().getTime();
	};

	// 导出
	const handleDownload = async () => {
		const fileName = `预算分析明细.xls`;
		let fileData;
		await detailApi.budgetCardInfoExportApi({ biProjectCode: biProjectCode.value, formatType: type, yearmonth: searchDate.value }).then(res => {
			fileData = res.data;
		});
		downloadNewFile(fileData, fileName);
	};

	// 【说明】抽屉相关
	let isShowDrawer = ref(false);
	const openDialog = () => {
		isShowDrawer.value = true;
	};
	const closeDrawer = data => {
		isShowDrawer.value = data.isShow;
	};

	const setDate = date => {
		searchDate.value = date
	};

	init();
</script>

<style scoped lang="scss"></style>
